<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .wrap {
        width: 700px;
        min-height: 500px;
        background-color: rgb(99, 213, 245);
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
      }

      .wrap #form {
        width: 460px;
        height: 120px;
        background: #fff;
        border-radius: 12px;
        position: absolute;
        left: 50%;
        top: 116px;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: wrap;
        padding: 26px;
        box-sizing: border-box;
      }

      .wrap #form p {
        margin-bottom: 10px;
      }

      .wrap #form p input {
        width: 140px;
        height: 28px;
        border-radius: 12px;
        border: solid 1px #19c2ff;
        margin: 0 10px;
        padding: 5px;
        box-sizing: border-box;
      }

      .wrap #form p:last-child input {
        width: 70px;
        background: #19c2ff;
        color: #fff;
        outline: none;
      }

      .wrap #form p select {
        width: 140px;
        height: 28px;
        border-radius: 12px;
        border: solid 1px #19c2ff;
        margin: 0 5px;
      }

      .wrap #table {
        width: 460px;
        border-radius: 12px;
        position: absolute;
        left: 50%;
        top: 275px;
        transform: translateX(-50%);
        box-sizing: border-box;
        overflow: hidden;
      }

      .wrap #table thead {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        color: #fff;
        background: #4cbfe5;
      }

      .wrap #table thead a {
        color: #fff;
      }

      .wrap #table tbody {
        color: #19c2ff;
      }

      .wrap #table tbody a {
        color: #19c2ff;
      }

      .wrap #table tbody tr {
        background: #fff;
      }

      .wrap #table tbody tr th:nth-child(1) {
        text-align: left;
        padding-left: 20px;
      }

      /* input[type='checkbox'] {
    width: 12px;
    height: 12px;
    background-color: #fff;
     -webkit-appearance: none; 
    border: 1px solid #19c2ff;
    border-radius: 2px;
    outline: none;
}

input[type=checkbox]:checked {
    color: #19c2ff;
} */
      .title {
        width: 100%;
        height: 200px;
        margin-top: 40px;
        text-align: center;
        font-size: 30px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <script>
      // 之前传递参数都是基于跳转；
      // 基于ajax 传递参数 是不跳转的；
      //注意： 使用的时候不要把跳转和 ajajx（不跳转）混在一起用；

      // 通过ajax 获取数据
      // 通过ajax获取数据 然后渲染到页面上；
      getList();
      function getList() {
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }
        xhr.open("get", "./getlist.php", true);
        xhr.onload = function () {
          //异步的；
          // console.log(xhr.responseText);
          let data = JSON.parse(xhr.responseText);
          // console.log(data);
          renderDom(data); // 出现删除按钮是在十几毫秒之后
          delFn();
        };
        xhr.send();
      }
      // console.log(data);
      // 添加学生信息
      // 获取学生的信息；
      let addBtn = document.querySelector("#addBtn");
      let userEle = document.querySelector("#username");
      let genderEle = document.querySelector("#gender");
      let ageEle = document.querySelector("#age");
      let tbodyEle = document.querySelector("tbody");
      let sortEle = document.querySelector("#sortBtn");
      // 添加信息；
      addBtn.onclick = function () {
        let username = userEle.value;
        let gender = genderEle.value;
        let age = ageEle.value;
        // console.log(username,gender,age);
        // 跳转过程；
        // window.location.href = `./addStudent.php?username=${username}&gender=${gender}&age=${age}`;
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }
        xhr.open(
          "get",
          `addStudent.php?username=${username}&gender=${gender}&age=${age}`,
          true
        );
        xhr.onload = function () {
          // console.log(xhr.responseText);
          // 把返还的json数据转成 对象
          let resData = JSON.parse(xhr.responseText);
          console.log(resData);
          if (resData.status == 1) {
            console.log("添加成功");
            getList();
          } else {
            console.log("添加失败");
          }
        };
        xhr.send();
      };

      function renderDom(data) {
        tbodyEle.innerHTML = "";
        data.forEach((item) => {
          let trEle = document.createElement("tr");
          trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td myid="${item.id}" class='del'>删除</td>`;
          tbodyEle.appendChild(trEle);
        });
      }
      function delFn() {
        // 删除功能;
        let delBtns = document.querySelectorAll(".del"); // 先执行获取 删除按钮的操作 ，删除还没有出现
        // 要在渲染完毕之后 ，就是删除按钮出现以后在获取删除按钮  然后再绑定点击事件
        delBtns.forEach((item) => {
          item.onclick = function () {
            console.log(1111);
            // console.log("点击了删除");
            let id = this.getAttribute("myid");
            // console.log(id);
            // window.location.href = `delete.php?id=${id}`;
            let xhr;
            if (window.XMLHttpRequest) {
              xhr = new XMLHttpRequest();
            } else {
              xhr = new ActiveXObject();
            }
            xhr.open("get", `delete.php?id=${id}`, true);
            xhr.onload = function () {
              // console.log(xhr.responseText);
              // 把返还的json数据转成 对象
              let resData = JSON.parse(xhr.responseText);
              console.log(resData);
              if (resData.status == 1) {
                console.log("删除成功");
                getList(); //更新数据
              } else {
                console.log("删除失败");
              }
            };
            xhr.send();
          };
        });
      }
    </script>
  </body>
</html>
